<template>
	<!-- 今日业绩详情 -->
	<view>
		<view class="perfor-details">
			<view class="act_explain-title">
				<view class="explain-title-none">
					<view class=""></view>
					<view class="">
						{{pageTitle}}
					</view>
				</view>
				<image :src="imglink + 'home/arrow-right.png'" mode=""></image>
			</view>
			<view class="performance-today-msg">
				<view class="all-perfor">
					<view class="">¥{{perforDetail.total}}</view>
					<view class="">成交额(元)</view>
				</view>
				<view class="recommend-coupon-line"></view>
				<view class="all-perfor">
					<view class="">{{perforDetail.num}}</view>
					<view class="">成交数(个)</view>
				</view>
				<view class="recommend-coupon-line"></view>
				<view class="all-perfor">
					<view class="">{{perforDetail.people}}</view>
					<view>客户数(人)</view>
				</view>
			</view>
			<!-- <view class="performance-today-msg">
				<view class="common-style before-perfor" v-for="(item,index) in performanceMsg" :key='index'>
					<text>{{item.value}}<text class="point">{{item.point}}</text></text>
					<text>{{item.name}}</text>
				</view>
				<view class="line before-perfor-line"></view>
			</view> -->
		</view>
		<view 
			class="perfor-today-content" 
			v-for="(item,index) in perforContent" 
			:key='index' @click="actPerfor(item)"
		>
			
			<view class="group-state-msg">
					<view class="perfor-today-content-title">
						{{item.activity_title | goodName_val}}
					</view>
					<view class="group-state-msg-right">
						<text>{{currentTime}}</text>
						<image :src="imglink + 'home/arrow-right.png'" mode=""></image>
					</view>
			</view>
			<view style="border-bottom: 1upx solid #DEDEDE;">
			</view>
			<view class="performance-today-msg">
				<view class="all-perfor">
					<view class="">¥{{item.total}}</view>
					<view class="">成交额(元)</view>
				</view>
				<view class="recommend-coupon-line"></view>
				<view class="all-perfor">
					<view class="">{{ item.ordtotal }}</view>
					<view class="">成交数(个)</view>
				</view>
				<view class="recommend-coupon-line"></view>
				<view class="all-perfor">
					<view class="">{{item.people}}</view>
					<view>客户数(人)</view>
				</view>
			</view>
			<!-- <view class="performance-today-msg">
				<view class="common-style before-perfor" v-for="(item,index) in performanceMsg" :key='index'>
					<text>{{item.value}}<text class="point">{{item.point}}</text></text>
					<text>{{item.name}}</text>
				</view>
				<view class="line before-perfor-line"></view>
			</view> -->
		</view>
	</view>
</template>

<script>
	export default{
		filters:{
			goodName_val(value) {
				if (!value) return ''
				if (value.length > 10) {
					return value.slice(0, 10) + '...'
				}
				return value
			},
		},
		data(){
			return{
				imglink: this.$store.state.imgLink,
				performanceMsg:[
					{name:'成交额(元)',value:'¥829000.',point:'00'},
					{name:'订单数(个)',value:'1200'},
					{name:'客户数(人)',value:'380'},
				],
				perforDetail:'',
				perforContent:[],
				y:"",
				m:"",
				d:'',
				currentTime:'',
				store_id:'',
				option:"",
				pageTitle:""
			}
		},
		onLoad(options) {
			console.log(options)
			this.option = options
			let store_id = parseInt(options.store_id,10);
			console.log('进入了onload 获取url的store_id',store_id)
			if(!store_id > 0){
				store_id = uni.getStorageSync('store_id')?parseInt(uni.getStorageSync('store_id'),10):0
			}else{
				uni.setStorageSync('store_id', store_id)
			}
			
			this.store_id = parseInt(store_id,10)
			this.$store.commit('updateStoreId',store_id)
			// this.getData()
		},
		onShow() {
			let time = new Date()
			this.y = time.getFullYear()
			this.m = time.getMonth()+1
			this.d = time.getDate()
			if(this.m<10){
				this.m = '0' + this.m
			}
			if(this.d<10){
				this.d= '0' + this.d
			}
			if(this.option.time == "today"){
				this.currentTime = `${this.y}-${this.m}-${this.d}`
				this.pageTitle = '今日业绩'
			}else{
				this.currentTime = uni.getStorageSync('perforTime')
				this.pageTitle = this.currentTime + '业绩'
			}
			console.log(this.currentTime)
			// console.log("123")
			this.getData()
		},
		methods:{
			actPerfor(item){
				uni.setStorageSync('actPerfor',item)
				uni.navigateTo({
					url:'../../shopPerformance/actPerforAll/actPerforAll?store_id=' + this.store_id + '&page=perfor'
				})
			},
			getData(){
				let data = {
					token:this.$store.getters.getToken,
					store_id:this.$store.getters.getStoreId,
					time:this.currentTime
				}
				this.$api.gian_today_perfor(data).then(res => {
					console.log(res)
					if(res.status){
						this.perforDetail = res.data.today
						this.perforContent = res.collect
						
						console.log(res.data.collect,'res.data.collect');
						console.log(res.data.today,'res.data.today');
						
					}
				}).catch(err => {
					console.log(err)
				})
			}
		}
	}
</script>

<style>
	.all-perfor>view:first-child>text{
		font-size: 28upx;
	}
	.all-perfor>view:first-child{
		color:#333333;
		font-size: 36upx;
	}
	.all-perfor>view:last-child{
		color: #999999;
		font-size: 24upx;
	}
	.recommend-coupon-line{
		width: 2upx;
		height: 46upx;
		border-left: 2upx solid #EFEFEF;
		margin-top: 22upx;
	}
	page{
		background: #F3F3F4;
	}
	.explain-title{
		display: flex;
	}
	.explain-title>view:first-child{
		width: 8upx;
		height: 32upx;
		background: #FFFFFF;
		margin-top: 6upx;
	}
	.explain-title>view:last-child{
		color: #FFFFFF;
		font-size: 30upx;
		margin-left: 16upx;
	}
	.performance-today-msg{
		margin-top: 38upx;
		display: flex;
		position: relative;
		justify-content: space-between;
		padding: 0 30upx;
		box-sizing: border-box;
		text-align: center;
	}
	.common-style{
		text-align: center;
	}
	.common-style:nth-child(2){
		margin: 0 106upx;
	}
	.common-style:nth-child(3){
		margin-left: 54upx;
	}
	.common-style>text{
		display: block;
		text-align: center;
	}
	.common-style>text:first-child{
		color: #FFFFFF;
		font-size: 36upx;
	}
	.common-style>text:last-child{
		color: rgba(255,255,255,0.8);
		font-size: 24upx;
	}
	.common-style .point{
		font-size: 28upx;
	}
	.line{
		width: 2upx;
		height: 46upx;
		border-left: 2upx solid rgba(239, 239, 239, 0.4);
		position: absolute;
		top: 20upx;left: 240upx;
	}
	.line:after{
		content: '';
		width: 2upx;
		height: 46upx;
		border-left: 2upx solid rgba(239, 239, 239, 0.4);
		position: absolute;
		left: 248upx;
	}
	.derive-msg{
		width: 638upx;
		height: 88upx;
		line-height: 88upx;
		text-align: center;
		margin: 0 auto;
		margin-top: 52upx;
		color: #FF8B46;
		font-size: 32upx;
		border-radius: 44upx;
		background: linear-gradient(to right,#FFFFFF,#FFEAD3);
		box-shadow: 0 8upx 16upx 0 rgba(166, 13, 0, 0.23);
	}
	.perfor-details{
		width: 100%;
		height: 236upx;
		background: #FFFFFF;
		padding: 38upx 30upx;
		box-sizing: border-box;
		margin-bottom: 20upx;
	}
	.act_explain-title{
		display: flex;
		justify-content: space-between;
	}
	.explain-title-none{
		display: flex;
	}
	.explain-title-none>view:first-child{
		width: 8upx;
		height: 32upx;
		background: #FF8B46;
		vertical-align: middle;
		margin-top: 6upx;
	}
	.explain-title-none>view:last-child{
		color: #333333;
		font-size: 30upx;
		margin-left: 10upx;
	}
	.act_explain-title>image{
		width: 18upx;
		height: 20upx;
		margin-top: 12upx;
	}
	.before-perfor>text:first-child{
		color: #333333;
	}
	.before-perfor>text:last-child{
		color: #999999;
	}
	.before-perfor-line{
		border-color: #EFEFEF;
	}
	.before-perfor-line:after{
		border-color: #EFEFEF;
	}
	.perfor-today-content{
		width: 100%;
		background: #FFFFFF;
		margin-bottom: 20upx;
		padding: 0 30upx;
		padding-bottom: 30upx;
		box-sizing: border-box;
	}
	.perfor-today-content-title{
		/* width: 100%; */
		/* padding: 30upx 0; */
		/* box-sizing: border-box; */
		/* border-bottom: 1upx solid #DEDEDE; */
		color: #333333;
		font-size: 34upx;
		line-height: 80upx;
	}
	.group-state-msg{
		display: flex;
		justify-content: space-between;
		margin-top: 40upx;
	}
	.group-state-msg-left{
		display: flex;
	}
	.group-state-msg-left>text{
		display: inline-block;
		color: #333333;
		font-size: 28upx;
		margin-left: 20upx;
		line-height: 80upx;
	}
	.group-state-msg-left>view,.group-state-msg-left>view>image{
		width: 80upx;
		height: 80upx;
		border-radius: 50%;
	}
	.group-state-msg-left>view{
		position: relative;
	}
	.group-state-msg-left>view>view{
		width: 66upx;
		height: 28upx;
		text-align: center;
		color: #FFFFFF;
		line-height: 28upx;
		border-radius: 14upx 14upx 14upx 0;
		background: #FF8B46;
		font-size: 22upx;
		position: absolute;
		top: -10upx;
		right: -48upx;
	}
	.group-state-msg-right{
		display: flex;
	}
	.group-state-msg-right>text{
		color: #999999;
		font-size: 28upx;
		line-height: 84upx;
	}
	.group-state-msg-right>image{
		width: 12upx;
		height: 20upx;
		margin-left: 28upx;
		margin-top: 30upx;
	}
</style>
